<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
    <!-- 
        总结
            模板语法的分类：
                插值语法：
                    a. 只能作用在标签体以内，可以写表达式
                指令语法：
                    a. 作用在标签的属性上，不能再加 {{ }}
                    b. 通过v-开头的属性叫做指令，指令一共14个，bind 一般用于绑定属性的值
                    c. v-bind: 可以简写为 :(冒号), 而且不是所有的指令都可以简写 
                    d. 每个指令都有自己的作用，v-bind: 只适用于给属性绑定一些动态值
     -->
</head>
<body>
    <div id="app">
        <h3>插值语法:</h3>
        <p>hello {{ msg }}</p>
        <hr>

        <h3>指令语法:</h3>
        <p>
            <!-- <a href="http://www.atguigu.com/">点我去{{ msg }}学习1</a> -->
            <!-- 控制台提示的简写 -->
            <a :href="url">点我去{{ msg }}学习1</a>
            <!-- 完整写法 -->
            <a v-bind:href="url">点我去{{ msg }}学习2</a>
        </p>
    </div>

    <script>
        // 清除生产提示
        Vue.config.productionTip = false

        new Vue({
            el: '#app',
            data: {
                msg: '尚硅谷(深圳)',
                url: 'http://www.atguigu.com/'
            }
        })
    </script>
</body>
</html>